<template>
  <div class="box">
    <div class="popup" v-show="popupShow" ref="pop">
      <p v-text="popup"></p>
    </div>
    <div class="title"></div>
    <div class="menu">
      <div class="logo">
        <img src="@/assets/icon/share/logo.png" alt />
      </div>
      <div class="button">
        <p class="login" @click="login()">登录</p>
      </div>
    </div>
    <div id="password_extract" v-if="show === 1">
      <div class="phone_content">
        <div class="phone_title">
          <img :src="shareData.organizationLogo" alt />
          <span>{{shareData.organizationName}}</span>
        </div>
        <div class="phone_body">
          <div class="extract_user">
            <p>
              {{shareData.userName}}
              <span>给您分享了文件</span>
            </p>
          </div>
          <div class="extract_phoneNum">请输入提取码：</div>
          <div class="extract_inp">
            <input type="text" v-model="password" />
          </div>
        </div>
      </div>
      <div class="phone_button" @click="passwordExtract()">提取文件</div>
      <div class="copy">
        <p>©2019 加优科技有限公司 版权所有</p>
      </div>
    </div>
    <div id="phone_extract" v-if="show === 3">
      <div class="phone_content">
        <div class="phone_title">
          <img :src="shareData.organizationLogo" alt />
          <span>{{shareData.organizationName}}</span>
        </div>
        <div class="phone_body">
          <div class="extract_user">
            <p>
              {{shareData.userName}}
              <span>给您分享了文件</span>
            </p>
          </div>
          <div class="extract_phoneNum">提取文档手机号码为：{{phoneNum(shareData.phone)}}</div>
          <div class="extract_inp">
            <input type="text" v-model="verificationCode" />
            <button>获取验证码</button>
          </div>
        </div>
      </div>
      <div class="phone_button" @click="phoneNumExtract()">提取文件</div>
      <div class="copy">
        <p>©2019 加优科技有限公司 版权所有</p>
      </div>
    </div>
    <div id="content" v-if="show === 2">
      <div class="content_title">
        <div class="content_title_logo">
          <img :src="shareData.organizationLogo" alt="">
        </div>
        <div class="content_title_text">
          <div class="company_name">
            <p>{{shareData.organizationName}}</p>
          </div>
          <div class="company_sharing">
            <p style="margin-right:20px;">{{shareData.userName}} 给您分享了{{fileList.lenght}}个文件</p>
            <p>
              链接有效期：
              <span v-text="publicFun.rebuildTime(shareData.expireTime,3)"></span>
            </p>
          </div>
        </div>
      </div>
      <div class="file_null" v-if="isFileNull" align="center">
        <img class="file_null_icon" src="/icon/file_null.png" />
        <p class="text_center">暂无文件/文件夹</p>
      </div>
      <ul>
        <li class="share_file" v-for="(item,key) in fileList" :key="key" @click="clickName(item)">
          <div class="share_file_left">
            <check-icon class="icon-box" :fileData="item"></check-icon>
            <div class="share_text">
              <p class="share_file_name" v-text="item.name">联通无限有限公司</p>
              <p
                class="share_file_time"
                v-text="publicFun.rebuildTime(item.updateTime,3)"
              >2019-05-29 18:00</p>
            </div>
          </div>
          <div>
            <p v-text="publicFun.getFileSize(item.size)"></p>
          </div>
        </li>
        <!-- <tr
          v-for="(file,key) in currentFileList"
          :key="key"
          :class="chooseFileList.indexOf(file.id) > -1 ? 'active' : ''"
          @click.right="showRightMenu($event,file)"`
        >
          <td class="checkbox">
            <input
              type="checkbox"
              @click.stop="chooseFileChange($event,file)"
              :checked="chooseFileList.indexOf(file.id) > -1"
            />
          </td>
          <td class="name pointer" @dblclick="clickName(file)">
            <check-icon class="icon-box" :fileData="file"></check-icon>
            <p class="fr" v-text="file.name"></p>
          </td>
          <td class="size text-center" v-text="publicFun.getFileSize(file.size)"></td>
          <td class="status text-center">
            <span v-text="publicFun.rebuildTime(file.updateTime,3)"></span>
          </td>
        </tr>-->
      </ul>
      <div class="webBanner">
        <p>更多丰富功能，可登录web端：https://pan.ddbes.com/体验</p>
      </div>
      <div class="bottom_menu">
        <!--<div class="bottom_menu_title">请选择</div>-->
        <div class="local" @click="getDownloadLoadLink">下载到本地</div>
        <!--<div class="yunpan">保存到网盘</div>-->
      </div>
    </div>
  </div>
</template>

<script>
import COS from 'cos-js-sdk-v5'

import CheckIcon from "@/components/CheckIcon.vue";
export default {
  name: "phoneShare",
  components: {
    CheckIcon
  },
  data() {
    return {
      shareData: {},
      show: 0,
      passwordObj: {},
      fileList: [],
      tokenData: [],
      getFileToken: "",
      verificationCode: "",
      password: "",
      popup: "",
      popupShow: false,
      timer: true,
      isFileNull: false,
      chooseFileList:[],
      cos:{},
      ossKey:{}
      // shareDataNum: Number
    };
  },
  mounted() {
    (function(doc, win) {
      var docEl = win.document.documentElement;
      var resizeEvt =
              "orientationchange" in window ? "orientationchange" : "resize";

      var refreshRem = function() {
        var clientWidth =
                win.innerWidth ||
                doc.documentElement.clientWidth ||
                doc.body.clientWidth;

        console.log(clientWidth);
        if (!clientWidth) return;
        var fz;
        var width = clientWidth;
        fz = (16 * width) / 375;
        docEl.style.fontSize = fz + "px";
      };

      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvt, refreshRem, false);
      doc.addEventListener("DOMContentLoaded", refreshRem, false);
      refreshRem();
    })(document, window);
    this.getUser(this.$route.params.code);

  },
  methods: {

    initCos:function(){
      const that = this
      this.cos = new COS({
        getAuthorization: function (options, callback) {
          // 异步获取临时密钥
          callback({
            TmpSecretId: that.tokenData.credentials.tmpSecretId,
            TmpSecretKey: that.tokenData.credentials.tmpSecretKey,
            XCosSecurityToken: that.tokenData.credentials.sessionToken,
            // 建议返回服务器时间作为签名的开始时间，避免用户浏览器本地时间偏差过大导致签名错误
            // StartTime: data.startTime, // 单位是秒
            ExpiredTime: that.tokenData.expiredTime
          });
        }
      });
    },

    chooseAll:function(){
      const that = this
      this.chooseFileList = []
      this.fileList.forEach(function (file) {
        if(file.fileType === 0){
          that.chooseFileList.push(file.id)
        }
      })
    },

    getDownloadLoadLink: function () {
      this.chooseAll()
      if (this.chooseFileList.length === 0) {
        return this.$message({type: 'error', message: '请选择要下载的文件'})
      }
      const that = this
      this.chooseFileList.forEach(function (id,key) {
        that.makeDownloadLink(id,key)
      })
      // this.$http.post('/pan/file/download/url/v1', {
      //     fileId: this.chooseFileList
      //   }
      // ).then(function (data) {
      //   if (data.data.code === 1) {
      //     that.webDownloadFile(data.data.data)
      //   }
      // })
    },

    makeDownloadLink: function (id,key) {
      const fileData = this.fileList.find(function (data) {
        return data.id === id
      })
      const bucketData = this.ossKey.find(function (data) {
        return data.relationId === id
      })
      this.cos.getObjectUrl({
        Bucket: bucketData.bucket,
        Region: this.$config.tencentRegion,     /* 存储桶所在地域，必须字段 */
        Key: bucketData.key,
        Sign: true,

      }, function (err, data) {
        if (err) return console.log(err);
        let downloadUrl = data.Url + (data.Url.indexOf('?') > -1 ? '&' : '?') + 'response-content-disposition=' + encodeURIComponent(`attachment; filename="${fileData.name}"`)  // 补充强制下载的参数
        setTimeout(function () {
          window.location.href = downloadUrl
        }, key * 1000)

      });
    },
    getUser(data) {
      const that = this;
      this.$http.get("/pan/shareInitInfo/" + data).then(function(data) {
        that.shareData = data.data.data;
        if (data.data.data.type !== 2) {
          that.checkApproved(data.data.data);
        } else {
          that.show = data.data.data.type;
        }
        that.passwordObj = {
          password: data.data.data.password,
          verification: false
        };
      });
    },
    checkApproved: function(shareData) {
      const password = localStorage.getItem(shareData.id);
      console.log(password)
      if (password && password !== "") {
        this.getFileList(password, shareData);
      } else {
        this.show = shareData.type;
      }
    },
    // 密码提取验证
    passwordExtract: function() {
      if (this.password === "") {
        return this.popupFun("请填写提取码");
      }
      this.getFileList(this.password, this.shareData);
    },
    // 手机验证码验证
    phoneNumExtract: function() {
      if (this.verificationCode === "") {
        return this.popupFun("验证码不能为空");
        // return this.$message({
        //   type: "error",
        //   message: "请填写提取码"
        // });
      }
      this.getFileList(this.password, this.shareData);
    },
    approved: function(status, data) {
      if (status) {
        this.show = 2;
        this.fileList = data.fileRelations;
        this.tokenData = data.uploadFileTokenVO;
        this.getFileToken = data.token;
        this.ossKey = data.ossKey;
        this.initCos()
        // this.shareDataNum = data.fileRelations.length;
      } else {
        this.popupFun("提取码错误");
      }
    },
    // 信息弹窗
    popupFun(data) {
      if (this.timer) {
        this.timer = false;
        this.popup = data;
        this.popupShow = true;
        this.$refs.pop.style.opacity = 1;
        var that = this;
        setTimeout(function() {
          that.$refs.pop.style.opacity = 0;
        }, 1000);
        setTimeout(function() {
          that.popupShow = false;
          console.log(that.popupShow);
          that.timer = true;
        }, 3000);
      }
    },
    // 打开文件夹
    clickName(data) {
      if (data.fileType === 1) {
        console.log(data);
        this.getFolderList(data.id);
      }
    },
    login(){
      this.$router.push({ path: '/shareSet' })
    },
    phoneNum(phone) {
      // console.log(phone.length);
      if (phone) {
        return phone.slice(0, 3) + "****" + phone.slice(-4);
      }
    },
    // 获取分享文件夹
    getFolderList(fileId) {
      const that = this;
      this.$http
        .post("/pan/getShareSubFiles", {
          fileId: fileId,
          shareId: this.shareData.id,
          token: this.getFileToken
        })
        .then(function(data) {
          if (data.data.code === 1) {
            that.fileList = that.fileSort(data.data.data.fileRelations);
            that.isChooseAll = false;
            if (that.fileList.length === 0) {
              that.isFileNull = true;
            } else {
              that.isFileNull = false;
            }
            that.$emit("folderChange", data.data.data);
          } else {
            // that.$message({
            //   type: "error",
            //   message: data.data.msg
            // });
            that.currentFileList = [];
            that.isFileNull = true;
          }
        });
    },
    fileSort: function (list) {
        return list.sort(function (a, b) {
          return b.fileType - a.fileType
        })
      },
    getFileList: function(password, shareData) {
      const that = this;
      this.$http
        .post("/pan/getShareFiles", {
          shareId: shareData.id,
          type: shareData.type,
          verify: password,
          version: "v1"
        }).then(function(data) {
          if (data.data.code === 1) {
            localStorage.setItem(that.shareData.id, password);
            that.show = 2
            that.approved(true, data.data.data);
          } else {
            that.show = shareData.type;
          }
        });
    }
  }

};
</script>

<style scoped>
.box {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
}
.title {
  width: 100%;
  height: 3.625rem;
  background-color: #fff;
  border-bottom: 1px solid #e2e2e2;
  padding: 0 1rem;
}
.menu {
  width: 100%;
  height: 3.625rem;
  background-color: #fff;
  padding: 0 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.menu .logo {
  width: 10rem;
  height: 1.8rem;
}
.menu .logo img {
  width: 100%;
  height: 100%;
}
.menu .button {
}
.menu .button .login {
  color: #323232;
  font-size: 1rem;
}
#password_extract,
#phone_extract {
  width: 100%;
  flex: 1;
  background-color: #f3f4fb;
  position: relative;
}
#password_extract {
  background-color: #fff;
}
.phone_content {
  margin-top: 10px;
  background-color: #fff;
}
/* 密码验证 手机号验证公共样式 */
.phone_content .phone_title {
  height: 4.16rem;
  border-bottom: 1px solid #e2e2e2;
  display: flex;
  align-items: center;
  padding-left: 1.8rem;
}
.phone_content .phone_title img {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 90px;
  margin-right: 0.9rem;
}
.phone_content .phone_title span {
  font-size: 1.25rem;
  color: #323232;
}
.phone_content .phone_body {
  /* height: 15rem; */
  widows: 100%;
  padding: 0 3.1rem;
  padding-bottom: 2rem;
}
.phone_content .phone_body .extract_user {
  margin-top: 20px;
}
.phone_content .phone_body .extract_user p {
  font-size: 1.5rem;
  color: #2d8ff1;
}
.phone_content .phone_body .extract_user p span {
  font-size: 1rem;
  color: #323232;
  margin-left: 20px;
}
.phone_content .phone_body .extract_phoneNum {
  margin-top: 42px;
  color: #999;
}
.phone_content .phone_body .extract_inp {
  margin-top: 20px;
  height: 3.75rem;
  width: 100%;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #bfbfbf;
}
.phone_content .phone_body .extract_inp input {
  border: none;
  outline: none;
  height: 2.5rem;
  /* width: 7.5rem; */
  font-size: 1.5rem;
  overflow: hidden;
  flex: 1;
}
.phone_content .phone_body .extract_inp button {
  font-size: 1.0625rem;
  color: rgb(119, 177, 235);
  border: none;
  outline: none;
  background: none;
}
.phone_button {
  margin: 0 3.125rem;
  height: 3.75rem;
  margin-top: 2rem;
  border-radius: 44px;
  background: #1e87f0;
  color: #fff;
  font-size: 1.2rem;
  text-align: center;
  line-height: 3.75rem;
}
#password_extract .phone_content .phone_body .extract_inp input {
  text-align: center;
}
.copy {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 20px;
  font-size: 1rem;
  color: #b0bfcf;
  text-align: center;
}
.copy p {
  text-align: center;
}
/* 信息弹窗 */
.popup {
  width: 12.5rem;
  height: 3.75rem;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -6.25rem;
  margin-top: -1.875rem;
  z-index: 99;
  border-radius: 12px;
  color: #fff;
  text-align: center;
  line-height: 3.75rem;
  font-size: 0.812rem;
  overflow: hidden;
  opacity: 1;
  transition: opacity 2s;
  -moz-transition: opacity 2s; /* Firefox 4 */
  -webkit-transition: opacity 2s; /* Safari and Chrome */
  -o-transition: opacity 2s; /* Opera */
}
/* 列表 */
#content {
  width: 100%;
  flex: 1;
  background-color: #f3f4fb;
  position: relative;
}
.content_title {
  width: 100%;
  height: 5rem;
  background-color: #fff;
  border-bottom: 1px solid #e2e2e2;
  padding: 15px 10px;
  display: flex;
  padding-right: 0;
}
.content_title .content_title_logo {
  width: 3.125rem;
  height: 3.125rem;
  background-color: rgb(6, 126, 246);
  border-radius: 90px;
  overflow: hidden;
}
.content_title .content_title_logo img {
  width: 100%;
  height: 100%;
}
.content_title .content_title_text {
  display: flex;
  flex-direction: column;
  padding-left: 0.625rem;
  flex: 1;
  display: flex;
  justify-content: center;
}
.content_title .content_title_text .company_name {
  font-size: 1.25rem;
  color: #323232;
}
.content_title .content_title_text .company_sharing {
  font-size: 0.7rem;
  color: #666;
  margin-top: 5px;
}
.content_title .content_title_text .company_sharing p {
  display: inline-block;
  margin-top: 5px;
}
.webBanner {
  font-size: 0.7rem;
  color: #aaa;
  text-align: center;
  margin-top: 10px;
}
.bottom_menu {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 4.357rem;
  background-color: #fff;
  font-size: 1.0625rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.bottom_menu div {
  margin: 0 10px;
  border-radius: 39px;
  height: 2.1875rem;
  line-height: 2.1875rem;
}
.bottom_menu .bottom_menu_title {
  color: #323232;
  width: 4.375rem;
}
.bottom_menu .local {
  background-color: #e3efff;
  color: #2479ed;
  flex: 1;
}
.bottom_menu .yunpan {
  background-color: #3986ef;
  color: #fff;
  flex: 1;
}
.share_file {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.25rem;
  height: 3.75rem;
  background-color: #fff;
}
.share_file .share_file_left {
  display: flex;
  align-items: center;
}
/* .icon-box{
  width: 20px;
  height: 20px;
  background-size: 224px;
} */
.share_file .share_text {
  margin-left: 1.25rem;
}
.share_file .share_text .share_file_name {
  font-size: 1rem;
  color: #323232;
}
.share_file .share_text .share_file_time {
  font-size: 0.687rem;
  color: #666;
  margin-top: 5px;
}
/* 空文件 */
.file_null{
  width: 10rem;
  height:10rem;
  margin:0 auto;
  margin-top:5rem;
}
.file_null .file_null_icon{
  width: 8rem;
  height: 8rem;
}
.file_null .text_center{
  font-size:1rem;
  color:rgb(153, 153, 153);
}
</style>
